﻿<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="utf-8"/>
    <title>新疆地区水稻产量影响因素可视化分析界面</title>
    <script type="text/javascript" src="{% static 'web/visualize/js/jquery.js' %}"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{% static 'web/visualize/css/comon0.css' %}"/>
</head>
<body>
<div class="loading">
    <div class="loadbox">
        <img src="{% static 'web/visualize/images/loading.gif' %}"/> 页面加载中...
    </div>
</div>

<div class="head">
    <h1><a href="{% url 'manage' %}?status=${{ status }}">新疆地区水稻产量影响因素可视化分析系统</a></h1>
    <div class="time" id="showTime">
        2019/12/05 16:16:54
    </div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            var t = null;
            document.getElementById("showTime").innerHTML = y + "/" + Appendzero(mt) + "/" + Appendzero(day) + " " + Appendzero(h) + ":" + Appendzero(m) + ":" + Appendzero(s) + "";

            function Appendzero(obj) {
                if (obj < 10) return "0" + "" + obj;
                else return obj;
            }

            t = setTimeout(time, 1000); //设定定时器，循环运行
        }

    </script>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: calc(58% - .15rem)">
                <div class="alltitle">
                    三年地区产量排名
                </div>
                <div class=" boxnav " id="echarts4">
                </div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">
                    温度变化趋势
                </div>
                <div class="boxnav" id="echarts3"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: calc(20% - .15rem)">
                <ul class="row h100 clearfix">
                    <li class="col-6">
                        <div class="sqzs h100">
                            <p>三年总产量</p>
                            <h1><span>{{ total_production }}</span></h1>
                        </div>
                    </li>
                    <li class="col-6">
                        <ul class="row h100 clearfix">
                            <li class="col-4">
                                <div class="tit01">
                                    {#取列表的第一个值#}
                                    {{ top_3_food_name_list.0 }}
                                </div>
                                <div class="piebox" id="pe01"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">
                                    {{ top_3_food_name_list.1 }}
                                </div>
                                <div class="piebox" id="pe02"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">
                                    {{ top_3_food_name_list.2 }}
                                </div>
                                <div class="piebox" id="pe03"></div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="boxall" style="height: calc(38% - .15rem)">
                <div class="alltitle">
                    产量变化趋势
                </div>
                <div class="boxnav" id="echarts1"></div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">
                    降雨量变化趋势
                </div>
                <div class="boxnav" id="echarts2"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">
                    机械拥有量变化趋势
                </div>
                <div class="boxnav" id="echarts5"></div>
            </div>
            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">
                    数据总览
                </div>
                <div class="boxnav" id="">
                    <table border="0" cellspacing="0">
                        <tbody>
                        <tr>
                            <th></th>
                            <th>平均降雨量</th>
                            <th>平均产量</th>
                            <th>平均温度℃</th>
                            <th>平均播种面积</th>
                        </tr>
                        <tr>
                            <th>2018</th>
                            <td>7.8</td>
                            <td>41707215</td>
                            <td>7.2</td>
                            <td>{{ seed_area_data_avg_list.0.1 }}</td>
                        </tr>
                        <tr>
                            <th>2019</th>
                            <td>8.1</td>
                            <td>51709290</td>
                            <td>8.5</td>
                            <td>{{ seed_area_data_avg_list.1.1 }}</td>
                        </tr>
                        <tr>
                            <th>2020</th>
                            <td>8.3</td>
                            <td>99300940</td>
                            <td>10</td>
                            <td>{{ seed_area_data_avg_list.2.1 }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">
                    农作物播种面积占比
                </div>
                <div class="boxnav" id="echarts6" style="height:calc(100% - .3rem);"></div>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript" src="{% static 'web/visualize/js/echarts.min.js' %}"></script>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });


    $(window).load(function () {
        $(".loading").fadeOut()
    })
    $(function () {
        echarts_1()
        echarts_2()
        echarts_3()
        echarts_4()
        echarts_5()
        echarts_6()
        pe01()
        pe02()
        pe03()

        function echarts_1() {
            var myChart = echarts.init(document.getElementById('echarts1'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                }, "grid": {
                    "top": "20%",
                    "right": "50",
                    "bottom": "20",
                    "left": "30",
                },
                legend: {
                    data: ['产量', '产量占比'],
                    right: 'center', width: '100%',
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },


                "xAxis": [
                    {
                        "type": "category",
                        data: [
                            {% for output_datum in output_data_trend %}
                                '{{ output_datum.0 }}',
                            {% endfor %}
                        ],
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14',},
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        "name": "产量 * 1000000",
                        axisTick: {show: false},
                        splitLine: {
                            show: false,

                        },
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {
                            min: 0,
                            max: 100,
                            lineStyle: {color: 'rgba(255,255,255,.1)'}
                        },//左线色

                    },
                    {
                        "type": "value",
                        "name": "产量占比",
                        "show": true,
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            formatter: "{value} %",
                            color: "rgba(255,255,255,.6)"
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//右线色
                        splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,.1)'}},//x轴线
                    },

                ],
                "series": [
                    {
                        "name": "产量",
                        "type": "bar",
                        "data": [
                            {% for datum in output_data_trend %}
                                {{ datum.1 }},
                            {% endfor %}

                        ],
                        "barWidth": "15%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#8bd46e'
                                }, {
                                    offset: 1,
                                    color: '#09bcb7'
                                }]),
                            }
                        },
                        "barGap": "0.2"
                    },
                    {
                        "name": "产量占比",
                        "type": "line",
                        "data": [
                            {% for foo in output_data_ratio_trend %}
                                {{ foo.1 }},
                            {% endfor %}

                        ],
                        "barWidth": "15%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#248ff7'
                                }, {
                                    offset: 1,
                                    color: '#6851f1'
                                }]),
                            }
                        },
                        "barGap": "0.2"
                    },
                ]


            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });


        }

        function echarts_2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts2'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                    // formatter:'{c}' ,
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '10',
                    bottom: '-20',
                    containLabel: true
                },
                legend: {
                    data: ["平均降雨量"],
                    right: 'center',
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },

                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        rotate: 0,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }

                    },

                    data: ['2018', '2019', '2020']

                }, {

                    axisPointer: {show: false},
                    axisLine: {show: false},
                    position: 'bottom',
                    offset: 20,


                }],

                yAxis: [{
                    type: 'value',
                    axisTick: {show: false},
                    // splitNumber: 6,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        formatter: "{value}",
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }],
                series: [
                    {
                        name: '平均降雨量',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: 'rgba(228, 228, 126, 1)',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(228, 228, 126, .2)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(228, 228, 126, 0)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(228, 228, 126, 1)',
                                borderColor: 'rgba(228, 228, 126, .1)',
                                borderWidth: 12
                            }
                        },
                        data: [
                            {% for seed_area_data_avg in seed_area_data_avg_list %}
                                {{ seed_area_data_avg.1 }},
                            {% endfor %}

                        ]

                    },

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts3'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['2018年', '2019年', '2020年'],
                    right: 'center',
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },
                grid: {
                    left: '0',
                    right: '20',
                    bottom: '0',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: 'white'

                        }
                    },
                    axisLabel: {
                        //rotate:-90,
                        formatter: function (value) {
                            return value.split("").join("\n");
                        },
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                },

                yAxis: {
                    type: 'value',
                    splitNumber: 4,
                    axisTick: {show: false},
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        }
                    },
                    axisLine: {show: false},
                },

                series: [{
                    name: '2018年',
                    type: 'line',
                    smooth: true,
                    data: [
                        {% for foo in temperature_data_2018 %}
                            {{ foo.2 }},
                        {% endfor %}

                    ]
                },
                    {
                        name: '2019年',
                        type: 'line',
                        smooth: true,
                        data: [
                            {% for foo in temperature_data_2019 %}
                                {{ foo.2 }},
                            {% endfor %}
                        ]
                    },
                    {
                        name: '2020年',
                        type: 'line',
                        smooth: true,
                        data: [
                            {% for foo in temperature_data_2020 %}
                                {{ foo.2 }},
                            {% endfor %}
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }


        function echarts_5() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts5'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                }, "grid": {
                    "top": "15%",
                    "right": "10%",
                    "bottom": "20",
                    "left": "10%",
                },
                legend: {
                    data: ['农用大中型拖拉机数量(台)', '大中型拖拉机配套农具（部）', '小型拖拉机数量(台)', '小型拖拉机配套农具(部)', '节水灌溉机械数量(台)'],
                    right: 'center',
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                "xAxis": [
                    {
                        "type": "category",

                        data: ['2018', '2019', '2020'],
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14',},
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        "name": "均值",
                        splitLine: {show: false},
                        axisTick: {show: false},
                        "axisLabel": {
                            "show": true,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//左线色

                    },
                    {
                        "type": "value",
                        "name": "单位2",
                        "show": true,
                        axisTick: {show: false},
                        "axisLabel": {
                            "show": true,
                            formatter: "{value} %",
                            color: "rgba(255,255,255,.6)"
                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//右线色
                        splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,.1)'}},//x轴线
                    },
                ],
                "series": [
                    {
                        "name": "农用大中型拖拉机数量(台)",
                        "type": "bar",
                        "data": [
                            {% for tractor in big_tractor %}
                                {{ tractor.2 }},
                            {% endfor %}

                        ],
                        "barWidth": "20%",

                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fccb05'
                                }, {
                                    offset: 1,
                                    color: '#f5804d'
                                }]),
                            }
                        },
                        "barGap": "0.5"
                    },
                    {
                        "name": "小型拖拉机数量(台)",
                        "type": "bar",
                        "data": [
                            {% for s_tractor in small_tractor %}
                                {{ s_tractor.2 }},
                            {% endfor %}

                        ],
                        "barWidth": "20%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'green'
                                }, {
                                    offset: 1,
                                    color: 'red'
                                }]),
                            }
                        },
                        "barGap": "0.5"
                    },
                    {
                        "name": "节水灌溉机械数量(台)",
                        "type": "bar",
                        "data": [
                            {% for farmer_tool in big_farmer_tool %}
                                {{ farmer_tool.2 }},
                            {% endfor %}
                        ],
                        "barWidth": "20%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'blue'
                                }, {
                                    offset: 1,
                                    color: 'green'
                                }]),
                            }
                        },
                        "barGap": "0.5"
                    },

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_4() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts4'));
            var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
            option = {

                grid: {
                    left: '2%',
                    top: '1%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [{
                    show: false,
                }],
                yAxis: [{
                    axisTick: 'none',
                    axisLine: 'none',
                    offset: '7',
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: '14',
                        }
                    },
                    data: [
                        {% for top9_data in top_9_place_list %}
                            '{{ top9_data.0 }}',
                        {% endfor %}
                    ]

                }, {
                    axisTick: 'none',
                    axisLine: 'none',
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: '14',
                        }
                    },

                    data: [
                        {% for top9_data in top_9_place_list %}
                            {{ top9_data.1 }},
                        {% endfor %}
                    ]

                }, {
                    name: '单位：件',
                    nameGap: '50',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: '16',
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data: [],
                }],
                series: [{
                    name: '条',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [
                        {% for top_9_ratio in top_9_ratio_list %}
                            {{ top_9_ratio }},
                        {% endfor %}

                    ],
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: function (param) {
                                return param.value + '%';
                            },
                            textStyle: {
                                color: 'rgba(255,255,255,.8)',
                                fontSize: '12',
                            }
                        }
                    },
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: '#03c893'
                            },
                                {
                                    offset: 1,
                                    color: '#0091ff'
                                }
                            ]),
                            barBorderRadius: 15,
                        }
                    },
                    z: 2
                }, {
                    name: '白框',
                    type: 'bar',
                    yAxisIndex: 1,
                    barGap: '-100%',
                    data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,.2)',
                            barBorderRadius: 15,
                        }
                    },
                    z: 1
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_6() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts6'));


            option = {
                title: {
                    text: {{ seed_area_data_avg_list.0.1 }} +{{ seed_area_data_avg_list.1.1 }} + {{ seed_area_data_avg_list.2.1 }},
                    subtext: '平均播种面积',
                    x: 'center',
                    y: '40%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 22,
                        lineHeight: 10,
                    },
                    subtextStyle: {
                        color: '#90979c',
                        fontSize: 16,
                        lineHeight: 10,

                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },

                visualMap: {
                    show: false,
                    min: 500,
                    max: 600,
                    inRange: {
                        //colorLightness: [0, 1]
                    }
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '50%'],
                    color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
                    data: [{
                        "value": {{ seed_area_data_avg_list.0.1 }},
                        "name": "2018"
                    }, {
                        "value": {{ seed_area_data_avg_list.1.1 }},
                        "name": "2019"
                    }, {
                        "value": {{ seed_area_data_avg_list.2.1 }},
                        "name": "2020"
                    }
                    ].sort(function (a, b) {
                        return a.value - b.value
                    }),
                    roseType: 'radius',

                    label: {
                        normal: {
                            formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                            rich: {
                                c: {
                                    color: 'rgb(241,246,104)',
                                    fontSize: 20,
                                    fontWeight: 'bold',
                                    lineHeight: 5
                                },
                                b: {
                                    color: 'rgb(98,137,169)',
                                    fontSize: 14,
                                    height: 44
                                },
                            },
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgb(98,137,169)',
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20,

                        }
                    }
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }


        function pe01() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe01'));
            var txt = {{ top_3_ratio_list.0 }}
                option = {
                    title: {
                        text: txt + '%',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff',
                            fontSize: '18'
                        }
                    },
                    color: 'rgba(255,255,255,.3)',

                    series: [{
                        name: 'Line 1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['65%', '80%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: txt,
                            name: '已使用',
                            itemStyle: {
                                normal: {
                                    color: '#eaff00',
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        }, {
                            name: '未使用',
                            value: 100 - txt
                        }]
                    }]
                };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function pe02() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe02'));
            var txt = {{ top_3_ratio_list.1 }}
                option = {
                    title: {
                        text: txt + '%',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff',
                            fontSize: '18'
                        }
                    },
                    color: 'rgba(255,255,255,.3)',

                    series: [{
                        name: 'Line 1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['65%', '80%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: txt,
                            name: '已使用',
                            itemStyle: {
                                normal: {
                                    color: '#ea4d4d',
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        }, {
                            name: '未使用',
                            value: 100 - txt
                        }]
                    }]
                };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function pe03() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe03'));
            var txt = {{ top_3_ratio_list.2 }}
                option = {
                    title: {
                        text: txt + '%',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff',
                            fontSize: '18'
                        }
                    },
                    color: 'rgba(255,255,255,.3)',

                    series: [{
                        name: 'Line 1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['65%', '80%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: txt,
                            name: '已使用',
                            itemStyle: {
                                normal: {
                                    color: '#395ee6',
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        }, {
                            name: '未使用',
                            value: 100 - txt
                        }
                        ]
                    }]
                };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })


</script>
</body>
</html>